<template>
  <div class="my_intergral">
    <van-nav-bar
      title="我的积分"
      right-text="申报"
      left-arrow
      @click-right="onClickRight"
      @click-left="$router.go(-1)"
      fixed
    />
    <div class="myIntegral-body">
      <van-tabs @click="changeTab">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-tab v-for="item in ownTitle" :name="item.identityId" :key="item.id">
              <template #title>
                <p>{{item.identityName}}</p>
                <p>总积分{{item.score ? item.score : 0}}</p>
                <p>可兑换积分{{item.available ? item.available : 0}}</p>
              </template>
              <van-row>
                <div
                  v-for="item_ in myScore"
                  :key="item_.id"
                  @click="toDetails(item_)"
                  class="score_list"
                >
                  <van-col span="16">
                    <p class="title">{{ item_.content }}</p>
                    <p>{{ item_.creationDate }}</p>
                  </van-col>
                  <van-col
                    span="8"
                    v-if="item_.mode == 1"
                  >+{{item_.changeValue ? item_.changeValue : 0 }}</van-col>
                  <van-col
                    span="8"
                    v-if="item_.mode == 2"
                  >-{{item_.changeValue ? item_.changeValue : 0 }}</van-col>
                </div>
              </van-row>
            </van-tab>
          </van-list>
        </van-pull-refresh>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import integral from "../../controller/integral";
import constant from "@/controller/constant.js";
export default {
  data() {
    return {
      ownTitle: [],
      identityId: "",
      myScore: [],
      id: "",
      loading: false,
      finished: true,
      isLoading: false,
      curPage: 1,
      pageSize: 10
    };
  },
  mounted() {
    this.integral_findOwn();
  },
  methods: {
    // 刷新
    onLoad() {
      this.isLoading = false;
      this.onRefresh();
    },
    // 刷新
    onRefresh() {
      let that = this;
      // this.isLoading = false;
      // if (!that.finished) {
      that.curPage += 1;
      that.isLoading = false;
      that.integral_record_list(this.id);
      // }
    },
    changeTab(name) {
      this.id = name;
      this.myScore = [];
      this.curPage = 1;
      this.integral_record_list(name);
    },
    // tab内容
    integral_record_list(identityId) {
      let that = this;
      let data = {
        curPage: that.curPage,
        identityId: identityId,
        pageSize: that.pageSize
      };
      if (!identityId) return;
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner"
      });
      integral
        .integral_record_list(data)
        .then(res => {
          if (res.code === "0") {
            that.finished = false;
            if (
              (res.datas && res.datas.records.length === 0) ||
              res.datas === null
            ) {
              // that.$toast("暂无更多数据");
              that.loading = false;
              that.isLoading = false;
              that.finished = true;
              return;
            }
            that.$nextTick(() => {
              that.loading = false;
              that.isLoading = false;
            });
            if (res.datas.records.length < that.pageSize) {
              that.finished = true;
            }
            if (
              res.datas &&
              res.datas.records.length !== 0 &&
              res.datas !== null
            ) {
              that.myScore = [...that.myScore, ...res.datas.records];
              this.$toast.clear();
            }
          }
        })
        .catch(() => {
          this.$toast(constant.unusualMsg);
        });
    },
    // tab标题
    integral_findOwn() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner"
      });
      integral.integral_findOwn().then(res => {
        if (res.code === "0") {
          if (res.datas && res.datas.length !== 0) {
            this.ownTitle = res.datas;
            this.integral_record_list(res.datas[0].identityId);
            this.id = res.datas[0].identityId;
            this.$toast.clear();
          }
        }
      });
    },
    onClickRight() {
      this.$router.push({ name: "integralDeclare" });
    },
    toDetails(item) {
      if (item.source == 1 || item.source == 2) {
        this.$router.push({ name: "integralAdd", params: { id: item.id } });
      }
      if (item.source == 3) {
        this.$router.push({ name: "integralCut", params: { id: item.id } });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.my_intergral {
  background: #fff;
  padding: 0 10px;
  height: 100vh;
  /deep/ .van-tabs--line .van-tabs__wrap {
    height: 90px;
  }
  /deep/ .van-ellipsis {
    height: 90px;
    font-size: 16px;
    p {
      height: 25px;
      font-size: 14px;
    }
    /* div {
      height: 60px;
      p {
        height: 25px;
      }
    } */
  }
  .score_list {
    width: 90%;
    height: 70px;
    padding: 0px 20px;
    border-bottom: 1px dashed #eee;
    .title {
      padding: 10px 0;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    /deep/ .van-col--8 {
      line-height: 70px;
      text-align: right;
      color: #dc4630;
      font-size: 16px;
    }
    /deep/ .van-col--16 {
      margin-top: 5px;
    }
  } 
  /deep/ .van-tabs__wrap--scrollable .van-tab {
    flex-basis: 35% !important;
  }
}
</style>
